<template>
    <div class="panel-info" v-dragMove="{ DragButton: '.window-header' }">
        <div class="window-header">图层控制</div>
        <div>
            <el-tree :data="data" :props="defaultProps" show-checkbox @node-click="handleNodeClick"
                @check-change="handleCheckChange" />
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, toRaw } from 'vue';

const { appContext } = getCurrentInstance();
const globalProperties = appContext.config.globalProperties
const sysConfig = window.sysConfig || {}
const data = sysConfig.baseLayers
const defaultProps = {
    children: 'children',
    label: 'name',
}

const handleNodeClick = (data) => {
    console.log(data)
}

const handleCheckChange = (node, checked, indeterminate) => {
    // globalProperties.$mitt.emit('layerSwitch', {
    //     data, checked
    // });
    const data = toRaw(node)
    switchLayerVisible(data, checked)
}

function switchLayerVisible(data, checked) {
    const layerManager = globalProperties.$layerManger
    let layerItem = layerManager.getLayerByIds(data)
    if (layerItem) {
        layerItem.show = checked
    } else {
        layerManager.addLayerByType(data.type, data)
    }

}



</script>
<style scoped>
.panel-info {
    position: fixed;
    top: 50px;
    left: 50px;
    width: 300px;
    height: 600px;
    border: solid 1px #8c8c8c;
    background: rgba(127, 255, 212, .7);
}

.window {
    width: 400px;
    height: 300px;
    border: 1px solid #cccccc;
    background: #e1eafc;
}

.window-header {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #beceeb;
    user-select: none;
}
</style>
